<template>
  <el-container :class="hide == true ? 'hideSidebar' : ''" class="home-wrapper">
    <el-aside>
      <el-menu
        ref="mainMenu"
        router
        :default-active="$route.path"
        :collapse-transition="false"
        :collapse="isCollapse"
        @select="selectMenu"
      >
        <el-menu-item class="hd"><i class="el-icon-setting fs16"></i><span class="bold">管理员后台</span></el-menu-item>
        <el-submenu index="1">
          <template slot="title"> <i class="el-icon-s-goods"></i><span>商品审核</span></template>
          <el-menu-item index="/productCheck/wait"><i></i><span>待审核</span></el-menu-item>
          <el-menu-item index="/productCheck/pass"><span>通过审核</span></el-menu-item>
          <el-menu-item index="/productCheck/noPass"><span>未通过审核</span></el-menu-item>
          <el-menu-item index="/productCheck/close"><span>下架的商品</span></el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"> <i class="el-icon-user-solid"></i><span>商家管理</span></template>
          <el-menu-item index="/users"><span>商家列表</span></el-menu-item>
          <el-menu-item index="/shopOrders"><span>商家订单</span></el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"> <i class="el-icon-s-management"></i><span>商品管理</span></template>
          <el-menu-item index="/cate"><span>商品分类</span></el-menu-item>
          <el-menu-item index="/bgImage"><span>商品背景图</span></el-menu-item>
          <el-menu-item index="/tagManage"><span>下单方式和服务费</span></el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> <i class="el-icon-s-tools"></i><span>前台综合管理</span></template>
          <el-menu-item index="/serviceAndCode"><span>客服和邀请码</span></el-menu-item>
          <el-menu-item index="/sysInfo"><span>客户端通知</span></el-menu-item>
          <el-menu-item index="/adminProfile"><span>账号信息</span></el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"> <i class="el-icon-s-tools"></i><span>总代理管理</span></template>
          <el-menu-item index="/agency"><span>总代理列表</span></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <Header :breadList="breadList" />

      <router-view :key="$route.path"></router-view>
    </el-main>
  </el-container>
</template>
<script>
import Header from "@/components/Header";

export default {
  components: {
    Header,
  },
  data() {
    return {
      hide: false,
      isCollapse: false,
      breadList: this.$store.state.breadList,
    };
  },

  methods: {
    selectMenu() {
      let self = this;
      setTimeout(function() {
        self.breadList = self.$store.state.breadList;
      }, 0);
    },
  },
};
</script>

<style lang="scss">
.home-wrapper.hideSidebar {
  .el-aside {
    width: 64px !important;
  }
  .el-main {
    margin-left: 64px;
    .el-header {
      left: 64px;
    }
  }
}

.home-wrapper {
  .el-main {
    padding-top: 0;
    margin-left: 200px;
    transition: margin-left 0.28s;
  }
}

.el-aside {
  .el-menu {
    .hd,
    .hd:hover,
    .hd:focus {
      background-color: #545c64;
      color: #fff !important;
      font-size: 20px;
      i {
        color: #fff;
        font-size: 20px;
      }
    }
  }
}

.hamburger {
  padding-right: 15px;
  i {
    font-size: 24px;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
